<template>
  <el-dialog
      title="订单详情"
      :visible.sync="visible"
      width="800px"
      :before-close="handleClose"
      class="order-detail-dialog"
      append-to-body
  >

    <!-- 订单基本信息 -->
    <div class="detail-section">
      <div class="section-title">基本信息</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">订单编号：</span>
            <span class="value">{{ orderInfo.orderNo }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">下单时间：</span>
<!--            <span class="value">{{ orderInfo.createTime | formatDate }}</span>-->
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">订单状态：</span>
            <el-tag :type="getOrderStatusType(orderInfo.status)">
              {{ getOrderStatusText(orderInfo.status) }}
            </el-tag>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="info-item">
            <span class="label">逝者姓名：</span>
            <span class="value">{{ orderInfo.deceasedName }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ orderInfo.deceasedGender }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">年龄：</span>
            <span class="value">{{ orderInfo.deceasedAge }}岁</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="16">
          <div class="info-item">
            <span class="label">服务地址：</span>
            <span class="value">{{ orderInfo.serviceAddress }}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span class="value">{{ orderInfo.contactPhone }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 商品明细 -->
    <div class="detail-section">
      <div class="section-title">商品明细</div>
      <el-table
          :data="orderInfo.items"
          border
          style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="category" label="类别" width="120"></el-table-column>
        <el-table-column prop="price" label="单价" width="120">
          <template slot-scope="scope">
            ¥{{ scope.row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
        <el-table-column label="小计" width="120">
          <template slot-scope="scope">
            ¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>

      <!-- 费用合计 -->
      <div class="total-section">
        <div class="total-item">
          <span>商品总额：</span>
          <span class="amount">¥{{ orderInfo.totalAmount.toFixed(2) }}</span>
        </div>
        <div class="total-item" v-if="orderInfo.discount">
          <span>优惠金额：</span>
          <span class="discount">-¥{{ orderInfo.discount.toFixed(2) }}</span>
        </div>
        <div class="total-item final">
          <span>实付金额：</span>
          <span class="final-amount">¥{{ (orderInfo.totalAmount - (orderInfo.discount || 0)).toFixed(2) }}</span>
        </div>
      </div>
    </div>

    <!-- 备注信息 -->
    <div class="detail-section" v-if="orderInfo.remark">
      <div class="section-title">备注信息</div>
      <div class="remark">{{ orderInfo.remark }}</div>
    </div>

    <!-- 操作记录 -->
    <div class="detail-section">
      <div class="section-title">操作记录</div>
<!--      <el-timeline>-->
<!--        <el-timeline-item-->
<!--            v-for="(activity, index) in orderInfo.activities"-->
<!--            :key="index"-->
<!--            :timestamp="activity.time | formatDate"-->
<!--            :type="activity.type">-->
<!--          {{ activity.content }}-->
<!--        </el-timeline-item>-->
<!--      </el-timeline>-->
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button
          type="primary"
          v-if="orderInfo.status === 'pending'"
          @click="handleConfirm">
        确认订单
      </el-button>
    </div>
  </el-dialog>
</template>

<script src="./detail.js" />

<style lang="scss" scoped src="./detail.scss" />